<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Principal | Vision Engager by DASH-IT</title>
<link type="text/css" rel="stylesheet" href="jsp/css/screen.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="jsp/css/ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="jsp/css/iphone.css" type="text/css" />
<script type="text/javascript" src="jsp/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jsp/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="jsp/js/modernizr.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#sidebar .links").accordion();
    //$("#container.graphview").scrollTo( "left:50%", 1000 );
	Modernizr.load();

       $("#scores a.expand").live("click",function(){
           linkexpansion(this);
       });
       $("#scores a.collapse").live("click",function(){
           linkexpansion(this);
       });

	setInterval( "checkAnchor()", 250);

  	$("#toolbar .listviewicon").click(function(){
		$("#container").removeClass("graphview");
		$("#scores li").each(function(index, element) {
                    $(this).css("left",$(this).attr("listx"));
                    $(this).css("top",$(this).attr("listy"));
                });
		$("#container").addClass("listview");
	});
	$("#toolbar .graphviewicon").click(function(){
		$("#scores li").each(function(index, element) {
                    $(this).attr("listx",$(this).css("left"));
                    $(this).attr("listy",$(this).css("top"));
                });
		$("#container").removeClass("listview");
		$("#scores li").each(function(index, element) {
                    $(this).css("left",$(this).attr("graphx"));
                    $(this).css("top",$(this).attr("graphy"));
                });
		$("#container").addClass("graphview");
                $(".parent").css("left",$("#container").width()/2 +"px");
	});
});
function linkexpansion(node)
{
    if($("#container").hasClass("listview"))
        listviewExpand(node);
    else
    {
        if($(node).hasClass("expand"))
            graphviewExpand(node);
        else
            graphviewCollapse(node);
    }
}
function listviewExpand(node)
{
    var parentNode = $(node).parent().parent().parent();
    var parent = parentNode.attr("scoreid");
    $(this).click(function(){
        $.get("scorecardTest.do", function(data)
        {
            parentNode.append(data);
            $("#scores").animate({ opacity:0.2, marginLeft:((parentNode.parents("ul").size()-1)*(-1065)-1065/2)+"px" }, 100, "swing", function(){ $(this).animate({ opacity:1, marginLeft:(parentNode.parents("ul").size())*(-1065)+"px" }, 200) });
        });
    });
}
function graphviewCollapse(node)
{
    var parentNode = $(node).parent().parent().parent();
    var children = parentNode.children("ul").children("li").size();
    $(node).removeClass("collapse");
    $(node).addClass("expand");
    $(node).text("+");
    parentNode.children("ul").fadeOut(350, function()
    {
           if(!parentNode.hasClass("parent"))
           {
                if( parentNode.prevAll("li").size() > 0 )
                {
                    if( parentNode.nextAll("li").size() > 0 )
                        parentNode.animate({left:"-="+(children-2)*200+"px"},500);
                    else
                        parentNode.animate({left:"-="+(children-1)*200+"px"},500);
                }
                parentNode.nextAll("li").animate({left:"-="+200*(children-1)+"px"},500);
                parentNode.parents("ul").children("span.horizontal").animate({width:"-="+200*(children-1)+"px"},500);
                parentNode.parents("li").each(function(index,element)
                {
                    if( $(this).prevAll("li").size() > 0 )
                        $(this).animate({left:"-="+(children-1)*200+"px"},100);
                    else
                        $(".graphview .parent").animate({left:"-="+children*25/(index+1)+"px"},100);
                    $(this).nextAll("li").animate({left:"-="+(children-1)*200+"px"},100);
                });
           }
           parentNode.children("ul").remove();
        $("#container").animate({scrollLeft: parentNode.offset().left, scrollTop: parentNode.offset().top},1250);
    });
}
function graphviewExpand(node)
{
    $(node).removeClass("expand");
    $(node).addClass("collapse");
    $(node).text("-");
    var parentNode = $(node).parent().parent().parent();
    var parent = parentNode.attr("scoreid");
    var children = parentNode.children("ul").children("li").size();
    if( children > 0 ) return false;

    $.get("scorecardTest.do?parent="+parent, function(data){
       parentNode.append(data);
       children = parentNode.children("ul").children("li").size();
       parentNode.attr("children",children);
       parentNode.parents("ul").animate({width:"+="+children*100+"px"}, 0);
       if(!parentNode.hasClass("parent"))
       {
            if( parentNode.prevAll("li").size() > 0 )
            {
                if( parentNode.nextAll("li").size() > 0 )
                    parentNode.animate({left:"+="+(children-2)*200+"px"},500);
                else
                    parentNode.animate({left:"+="+(children-1)*200+"px"},500);
            }
            parentNode.nextAll("li").animate({left:"+="+200*(children-1)+"px"},500);
            parentNode.parents("ul").children("span.horizontal").animate({width:"+="+200*(children-1)+"px"},500);
            parentNode.parents("li").each(function(index,element)
            {
                if( $(this).prevAll("li").size() > 0 )
                    $(this).animate({left:"+="+(children-1)*200+"px"},100);
                else
                    $(".graphview .parent").animate({left:"+="+children*25/(index+1)+"px"},100);
                $(this).nextAll("li").animate({left:"+="+(children-1)*200+"px"},100);
            });
       }
       parentNode.children("ul").css("display","block");
       parentNode.children("ul").css("width",200*children+"px");
       parentNode.children("ul").css("left",(200*children-150)/-2+"px"); //marginleft?
       parentNode.children("ul").children("li").each(function(index){
           $(this).attr("graphy","30px");
           $(this).attr("graphx",(index*150+(index*2+1)*25)+"px");
           $(this).css("left",$(this).attr("graphx"));
           $(this).css("top",$(this).attr("graphy"));
           $(this).css("display","block");
           $(this).prepend('<span class="line" parent="'+parent+'" style="height:15px; left:73px; top:-15px;"></span>');
       });
       parentNode.children("ul").prepend('<span class="horizontal line" parent="'+ parent +'" style="width:'+(200*children-196)+'px; left:100px; top:15px;"></span>');
       parentNode.children("ul").prepend('<span class="line" parent="' + parent + '" style="height:15px; left:' + (100*children) +'px; top:0px;"></span>');
       $(".line[parent="+parent+"]").css("display","block").animate({opacity:1.0}, 500);
       $("#container").animate({scrollLeft: parentNode.children("ul").offset().left-25*parent, scrollTop: parentNode.offset().top+175},1250);
    });

}
var currentAnchor = null;  
function checkAnchor()
{  
	if(currentAnchor != document.location.hash)
	{  
		currentAnchor = document.location.hash;  
		if(!currentAnchor || currentAnchor == "#") 
		{
			resetScoreSection(null);
			$("#scores").delay(50).animate({ marginLeft:0 }, 200);  
		}
		else if( currentAnchor == "#zero" )
		{
			resetScoreSection("zero");
			$("#scores").delay(50).animate({ marginLeft:"-100%" }, 200);
		}
		else if( currentAnchor == "#une" )
		{
			resetScoreSection("une");
			$("#scores").delay(50).animate({ marginLeft:"-200%" }, 200);
		}
		else if( currentAnchor == "#listview" )
			$(".listviewicon").click();
		else if( currentAnchor == "#graphview" )
			$(".graphviewicon").click();
	}  
}  
function resetScoreSection(section)
{
	$("#scores ul").css("display","none");
	if(section != null && section != "")
	{
		$("#scores ."+section).css("display","block");
		$("#scores ."+section).parentsUntil("#scores").css("display","block"); 
	}
}
</script>
<!--[if IE]>
    <style type="text/css">
        .listview #scores ul
        {
            width:50%;
        }
        .listview #scores ul ul
        {
            padding-left:50%;
        }
        
        .listview #scores ul ul ul
        {
            padding-left:25%;
        }	
        
        .listview #scores ul ul ul ul
        {
            padding-left:12.5%;
        }
        
        .listview #scores ul ul ul ul ul
        {
            padding-left:6.25%;
        }
    </style>
<![endif]-->
</head>
<body>
<!-- onselectstart="return false;" ondragstart="return false;" !-->
<div id="header">
 <ul id="userinfo">
    <li><span><c:out default="Usuario" value="${requestScope.user}" /></span></li>
    <li><span class="dateinfo"><fmt:formatDate value="${requestScope.now}" pattern="dd-MMM-yyyy" /></span></li>
    <li><a href="#"><span>Cerrar sesión</span></a></li>
 </ul>
 <ul id="shortcuts">
    <li><span id="homeshortcut"></span></li>
    <li><span id="annotationshortcut"></span></li>
    <li><span id="helpshortcut"></span></li>
    <li><span id="arrowshortcut"></span></li>
 </ul>
 <ul id="menu">
  <li>Métricas
  	<ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </li>
  <li>Reportes
  	<ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </li>
  <li>RAE's
  	<ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </li>
  <li>Proyectos
  	<ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </li>
 </ul>
</div>
<div id="workarea">
 <div id="sidebar">
  <div class="links">
      <h3><a href="#" class="section">Vistas</a></h3>
      <div>
        <a href="#" class="link">Link A</a>
        <a href="#" class="link">Link B</a>
        <a href="#" class="link">Link C</a>
        <a href="#" class="link">Link D</a>
      </div>
      <h3><a href="#" class="section">Mapas</a></h3>
      <div>
        <a href="#" class="link">Link A</a>
        <a href="#" class="link">Link B</a>
        <a href="#" class="link">Link C</a>
        <a href="#" class="link">Link D</a>
      </div>
      <h3><a href="#" class="section">Reportes</a></h3>
      <div>
        <a href="#" class="link">Link A</a>
        <a href="#" class="link">Link B</a>
        <a href="#" class="link">Link C</a>
        <a href="#" class="link">Link D</a>
      </div>
      <h3><a href="#" class="section">RAE's</a></h3>
      <div>
            <a href="#" class="link">Link A</a>
        <a href="#" class="link">Link B</a>
        <a href="#" class="link">Link C</a>
        <a href="#" class="link">Link D</a>
      </div>
      <h3><a href="#" class="section">Proyectos</a></h3>
      <div>
        <a href="#" class="link">Link A</a>
        <a href="#" class="link">Link B</a>
        <a href="#" class="link">Link C</a>
        <a href="#" class="link">Link D</a>
      </div>
  </div>
  <!--
  <div id="footer">
    <div class="logo">DASH-IT</div>
    <span class="copyright">&copy;2011 DASH-IT. Todos los derechos reservados.</span>
  </div>
  !-->
 </div>
 <div id="container" class="listview">
 	<div id="toolbar">
      <span class="key">Dam diram: </span>
      <span class="value">Value</span>
      <span class="spacer"></span>
      <span class="key">Dam diram: </span>
      <span class="value">Value</span>
      <a href="#listview"><span class="listviewicon" title="Vista Deslizable"></span></a>
      <a href="#graphview"><span class="graphviewicon" title="Vista de Árbol"></span></a>
    </div>
    <span id="zero"></span><span id="une"></span>
    <span id="deux"></span><span id="trois"></span>
    <span id="quatre"></span><span id="cinq"></span>
    <span id="gridviewanchor"></span><span id="listviewanchor"></span>
    <div id="scorecontainer">
    <ul id="scores" class="items">
        <c:if test="${requestScope.root != null}">
            <c:set var="root" value="${requestScope.root}" />
            <li class="parent scorecard" parentid="${root.parent}" scoreid="${root.id}" children="0" graphx="50%" graphy="50px">
                <div class="detail">
                    <span class="name">${root.name}</span>
                    <span class="dimension">${root.dimension}</span>
                    <p class="toolbar">
                        <a href="#" class="send">@</a>
                        <a href="#" class="annotate">#</a>
                        <a href="#" class="overview">i</a>
                        <c:if test="${root.nodes > 0}">
                            <a href="#${root.id}" class="expand">+</a>
                        </c:if>
                    </p>
                </div>
            </li>
        </c:if>
    </ul>
    </div>
 </div>
<%--
 <div id="scorecardContainer">
      <c:set var="scores" value="${requestScope.scores}" />
      <c:set var="points" value="${requestScope.points}" />
      <c:if test="${fn:length(points) > 0}">
        <c:set var="primerPunto" value="${points[0]}" />
        <c:set var="ultimoPunto" value="${points[fn:length(points)-1]}" />
        <c:set var="puntoMedio" value="${(ultimoPunto[0]-primerPunto[0])/2+primerPunto[0]}" />

        <c:forEach items="${scores}" var="score" varStatus="status">
          <div class="scorecard" style="top:${score.y}px; left:${score.x}px">
              <span>Dam diram</span>
          </div>
        </c:forEach>
        <c:forEach items="${points}" var="point" varStatus="status">
          <span class="line" style="height:10px; left:${point[0]-2}px; top:${point[1]}px;"></span>
        </c:forEach>

        <span class="line parentNode" style="height: 8px; left: ${puntoMedio-2}px; top: ${primerPunto[1]-8}px;"></span>
        <span class="line" style="width: ${ultimoPunto[0]+4-primerPunto[0]}px; top: ${primerPunto[1]-2}px; left: ${primerPunto[0]-2}px;"></span>
      </c:if>
 </div>
--%>
</div>
</body>
</html>